<template>
    <div class="city_body">
		<!-- <div class="city_list">
			<div class="city_hot">
				<h2>热门城市</h2>
				<ul class="clearfix">
					<li>上海</li>
					<li>北京</li>
					<li>上海</li>
					<li>北京</li>
					<li>上海</li>
					<li>北京</li>
					<li>上海</li>
					<li>北京</li>
				</ul>
			</div>
			<div class="city_sort">
				<div>
					<h2>A</h2>
					<ul>
						<li>阿拉善盟</li>
						<li>鞍山</li>
						<li>安庆</li>
						<li>安阳</li>
					</ul>
				</div>
				<div>
					<h2>B</h2>
					<ul>
						<li>北京</li>
						<li>保定</li>
						<li>蚌埠</li>
						<li>包头</li>
					</ul>
				</div>
				<div>
					<h2>A</h2>
					<ul>
						<li>阿拉善盟</li>
						<li>鞍山</li>
						<li>安庆</li>
						<li>安阳</li>
					</ul>
				</div>
				<div>
					<h2>B</h2>
					<ul>
						<li>北京</li>
						<li>保定</li>
						<li>蚌埠</li>
						<li>包头</li>
					</ul>
				</div>
				<div>
					<h2>A</h2>
					<ul>
						<li>阿拉善盟</li>
						<li>鞍山</li>
						<li>安庆</li>
						<li>安阳</li>
					</ul>
				</div>
				<div>
					<h2>B</h2>
					<ul>
						<li>北京</li>
						<li>保定</li>
						<li>蚌埠</li>
						<li>包头</li>
					</ul>
				</div>	
			</div>
		</div>
		<div class="city_index">
			<ul>
				<li>A</li>
				<li>B</li>
				<li>C</li>
				<li>D</li>
				<li>E</li>
			</ul>
		</div> -->
		<div class="city_list">
			<Loading v-if="isLoding" />
			<Scroller v-else ref="city_list">
				<div>
					<div class="city_hot">
						<h2>热门城市</h2>
						<ul class="clearfix">
							<li v-for="item in hotList" :key="item.id" @tap='handleToCity(item.nm,item.id)'>{{ item.nm }}</li>
						</ul>
					</div>
					<div class="city_sort" ref="city_sort">
						<div v-for="item in cityList" :key='item.index'>
							<h2>{{ item.index }}</h2>
							<ul>
								<li v-for="items in item.list" :key="items.id" @tap='handleToCity(items.nm,items.id)'>{{ items.nm }}</li>
							</ul>
						</div>
					</div>
				</div>
			</Scroller>
		</div>
		<div class="city_index">
			<!-- touchstart 是 vue 在移动端触摸的事件,click 是 点击事件 -->
			<ul v-for="(item,index) in cityList" :key='item.index' @touchstart='handleToIndex(index)'>
				<li>{{ item.index }}</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name:'City',
	data(){
		return{
			cityList:[],
			hotList:[],
			isLoding:true
		}
	},
	mounted(){
		var cityList = window.localStorage.getItem('cityList')
		var hotList = window.localStorage.getItem('hotList')
		if(cityList && hotList){
			this.cityList = JSON.parse(cityList)
			this.hotList = JSON.parse(hotList)
			this.isLoding=false
		}else{
			this.axios.get('/api/cityList')
			.then((res)=>{
				var msg = res.data.msg
				if(msg === 'ok'){
					var cities = res.data.data.cities
					this.isLoding=false
					var { cityList, hotList } = this.formatCityList(cities)
					this.cityList = cityList
					this.hotList = hotList
					window.localStorage.setItem('cityList',JSON.stringify(cityList))
					window.localStorage.setItem('hotList',JSON.stringify(hotList))
				}
			})
			.catch(err=>{
				console.log(err)
			})
		}
	},
	methods:{
		//将获取的数据变成 需要的数据类型 [{index:'大写字母',list:[{name:城市的名称,id:城市所对应的id}]}]
		formatCityList(cities){
			var cityList = []
			var hotList = []
			// 遍历出来热门城市
			for(var i=0;i<cities.length;i++){
				if(cities[i].isHot === 1){
					hotList.push(cities[i])
				}
			}
			for(var i=0;i<cities.length;i++){
				//substring(x,y) 截取字符串,从第x开始,到第y个结束
				//toUpperCase()  小写字母转大写字母
				var firstLetter = cities[i].py.substring(0,1).toUpperCase()
				if(toCom(firstLetter)){    //新添加索引 index
					cityList.push({index : firstLetter,list:[{nm:cities[i].nm,id:cities[i].id}]})
				}else{		//累加到已有的索引 index 中
					for(var j=0;j<cityList.length;j++){
						if(cityList[j].index === firstLetter){
							cityList[j].list.push({nm:cities[i].nm,id:cities[i].id})
						}
					}
				}
			}
			// 这里对 A-Z 之间26个字母进行排序
			cityList.sort((n1,n2)=>{
				if(n1.index > n2.index){
					return 1;
				}else if(n1.index < n2.index){
					return -1;
				}else{
					return 0;
				}
			})
			function toCom(firstLetter){
				for(var i=0;i<cityList.length;i++){
					if(cityList[i].index === firstLetter){
						return false
					}
				}
				return true
			}
			// 将获取的数据进行传递出去
			return{
				cityList,
				hotList
			}
		},
		// 点击右侧的 A-Z 跳转到相应的 列表
		// 改变滚动条的位置
		handleToIndex(index){
			var h2 = this.$refs.city_sort.getElementsByTagName('h2')
			// this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop
			this.$refs.city_list.toScrollTop(-h2[index].offsetTop)
		},
		handleToCity(nm,id){
			this.$store.commit('city/CITY_INFO',{nm,id})
			window.localStorage.setItem('nowNm',nm)
			window.localStorage.setItem('nowId',id)
			this.$router.push('/movie/nowPlaying')
		}
	}
}
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{background-color:transparent;width:0;}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul{}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort{}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}
</style>
